import React, { useCallback, useState } from 'react';
import Hotkeys, { Commands, getExplain } from '@dc/hotkeys';
import BaseComponent from '..';
import C1 from './C1.jsx';
import C2 from './C2.jsx';

export default function Demo() {
  const [text, setText] = useState('');

  return (
    <div>
      <input
        value={text}
        type="text"
        placeholder="可在此输入文字"
        onChange={(e) => {
          setText(e.target.value);
        }}
      />
      {/* <BaseComponent>
        <C1 tag="c1_1" />
      </BaseComponent>
      <BaseComponent>
        <C1 tag="c1_2" />
      </BaseComponent>
      <BaseComponent>
        <C1 tag="c1_3" />
      </BaseComponent> */}
      <C2 tag="AAA" bindCommand={Commands.AudioSwitch} />
      <C2
        tag="BBB"
        onChange={useCallback((e) => {
          window.console.log('--->', e?.key, text);
        }, [])}
      />
    </div>
  );
}
